<template>
  <view class="container">
    <!-- 聊天内容区域 -->
    <scroll-view 
      class="chat-container" 
      scroll-y 
      :scroll-top="scrollTop"
      ref="scrollView"
    >
      <!-- 聊天历史标题 -->
      <view class="chat-history-title" v-if="messages.length > 0">
        <text>今日对话</text>
      </view>
      
      <view 
        v-for="(msg, index) in messages" 
        :key="index" 
        class="message-wrap"
        :class="msg.type === 0 ? 'ai' : 'user'"
      >
        <!-- AI消息在左边 -->
        <view v-if="msg.type === 0" class="avatar-wrapper a">
          <image class="avatar" src="/static/mine/kf.jpg" />
        </view>
        
        <!-- 如果是AI消息且不是思考状态，显示内容 -->
        <view v-if="msg.type !== 0 || !msg.isThinking" class="bubble" :class="msg.type === 0 ? 'ai-bubble' : 'user-bubble'">
          <text class="message-content">{{ msg.content }}</text>
        </view>
        
        <!-- AI思考状态指示器 -->
        <view v-if="msg.type === 0 && msg.isThinking" class="thinking-indicator">
          <span class="dot dot-1"></span>
          <span class="dot dot-2"></span>
          <span class="dot dot-3"></span>
        </view>
        
        <!-- 用户消息在右边 -->
        <view v-if="msg.type === 1" class="avatar-wrapper u">
          <image class="avatar" :src="avatar" />
        </view>
      </view>
    </scroll-view>

    <!-- 底部导航栏 - 固定在底部 -->
    <view class="fixed-bottom">
      <!-- 输入区域 -->
      <view class="input-area">
        <button class="emoji-btn">
          <uni-icons type="emoji" size="24" color="#666"></uni-icons>
        </button>
        <input 
          v-model="inputText" 
          class="input" 
          placeholder="输入你想要咨询的问题"
          @confirm="sendMessage"
          :disabled="isThinking"
        />
        <button class="send-btn" @click="sendMessage" :disabled="isThinking">
          <uni-icons v-if="isThinking" type="loading" size="24" color="#fff"></uni-icons>
          <text v-else>发送</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, nextTick, onMounted } from 'vue'
import { useInfoStore } from '/store';
import { Apicustomer } from '../api/common';

const user = useInfoStore();
// 消息数据
const messages = reactive([])

const inputText = ref('')
const scrollTop = ref(0)
const scrollView = ref(null)
const isThinking = ref(false)
const avatar = ref('')

// 初始加载时发送欢迎消息
onMounted(async () => {
  const u = user.userInfo
  // 获取用户信息
  avatar.value = u.avatar
  
  // 添加实际的欢迎消息
  setTimeout(() => {
    messages.push({
      type: 0,
      content: '你好，我是你的智能客服小清，请问你有什么需要帮助的吗？'
    })
    scrollToBottom()
  }, 500) 
})

// 发送消息
const sendMessage = async () => {
  if (!inputText.value.trim() || isThinking.value) return
  
  // 用户消息
  messages.push({
    type: 1,
    content: inputText.value.trim()
  })
  // 自动滚动
  await scrollToBottom()
  const content = inputText.value.trim();
  inputText.value = ''
  // 模拟AI思考状态
  isThinking.value = true
  messages.push({
    type: 0,
    content: '',
    isThinking: true
  })
  await scrollToBottom()
  
  // 用户发送消息
  const res = await Apicustomer(content)
  await scrollToBottom()
  
  if(res) {
    // 移除思考状态的占位消息
    messages.pop()
    // 添加实际的回复消息
    messages.push({
      type: 0,
      content: res
    })
    isThinking.value = false
  }
}

// 滚动到底部
const scrollToBottom = async () => {
  await nextTick()
  scrollTop.value = Date.now()
}
</script>

<style scoped lang="less">
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #f8f9fa;
}

.chat-container {
  flex: 1;
  padding: 20rpx;
  overflow: auto;
  padding-bottom: 120rpx;
}

/* 聊天历史标题 */
.chat-history-title {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 20rpx;
  text-align: center;
  padding: 10rpx 0;
  border-bottom: 1rpx solid #eee;
}

.message-wrap {
  display: flex;
  margin-bottom: 30rpx;
  position: relative;
}

.message-wrap.user {
  justify-content: flex-end;
  .bubble {
    margin-right: 10rpx;
    margin-left: 0;
  }
  .u {
    margin-left: 10rpx;
    margin-right: 40rpx;
  }
}

.message-wrap.ai {
  justify-content: flex-start;
  .bubble {
    margin-left: 10rpx;
    margin-right: 0;
  }
  .a {
    margin-right: 10rpx;
  }
}

.avatar-wrapper {
  display: flex;
  align-items: center;
}

.avatar {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.bubble {
  max-width: 500rpx;
  padding: 20rpx;
  font-size: 28rpx;
  line-height: 1.4;
  word-wrap: break-word;
  word-break: break-all;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* AI消息气泡样式 */
.ai-bubble {
  background: #f5f5f5;
  color: #333;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  border-radius: 20rpx 20rpx 20rpx 5rpx;
}

/* 用户消息气泡样式 */
.user-bubble {
  background: #07c160;
  color: white;
  border-radius: 20rpx 20rpx 5rpx 20rpx;
}

.message-content {
  word-break: break-word;
}

/* AI思考状态指示器 */
.thinking-indicator {
  display: flex;
  align-items: center;
  margin-left: 10rpx;
  justify-content: flex-start;
}

.dot {
  width: 10rpx;
  height: 10rpx;
  margin: 0 5rpx;
  border-radius: 50%;
  background-color: #000;
  animation: dotPulse 1.5s infinite ease-in-out;
}

.dot-1 {
  animation-delay: 0s;
}

.dot-2 {
  animation-delay: 0.5s;
}

.dot-3 {
  animation-delay: 1s;
}

@keyframes dotPulse {
  0%, 100% {
    background-color: #000;
    opacity: 0.4;
  }
  50% {
    background-color: #ff9800;
    opacity: 1;
  }
}

/* 底部固定的导航栏 */
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100rpx;
  background: white;
  border-top: 1rpx solid #eee;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.input-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.emoji-btn {
  background: none;
  border: none;
  padding: 0 15rpx;
  color: #666;
  display: flex;
  align-items: center;
}

.input {
  flex: 1;
  height: 70rpx;
  padding: 0 20rpx;
  margin: 0 20rpx;
  background: #f0f0f0;
  border: none;
  border-radius: 35rpx;
  font-size: 28rpx;
  box-shadow: inset 0 2rpx 5rpx rgba(0, 0, 0, 0.05);
  outline: none;
}

.send-btn {
  height: 70rpx;
  line-height: 70rpx;
  background: linear-gradient(45deg, #07c160, #09b268);
  color: white;
  border: none;
  border-radius: 35rpx;
  font-size: 28rpx;
  padding: 0 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(7, 193, 96, 0.3);
}

.send-btn:disabled {
  background: #cccccc;
  cursor: not-allowed;
  opacity: 0.7;
}

.input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}
</style>